<template>
  <form enctype="multipart/form-data" id="upload_form">
    <div class="row no-gutter">
      <div class="col-25 upload-icon img-item" v-for="imgs in imgsrc">
        <img :src="imgs" />
      </div>
      <div class="col-25 upload-icon btn-upload">
        <div class="file" :class="iconupload">
          <input type="file" accept="image/*" multiple="multiple" id="upload_file" @change="doChange" />
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import $ from 'zepto'

export default {
  ready () {
    setTimeout(function () {
      $('.upload-icon').css('height', $('.upload-icon').css('width'))
    }, 300)
  },
  data () {
    return {
      imgsrc: [],
      imagesLen: 0
    }
  },
  props: {
    iconupload: {
      type: String,
      default: 'add-uploads'
    }
  },
  methods: {
    doChange () {
      let fileInput = document.getElementById('upload_file')
      if (fileInput.value === null || fileInput.value === '') {
        return false
      }
      let fileList = fileInput.files
      let formData = null
      let that = this
      this.imagesLen = fileList.length
      $.showPreloader('正在上传图片...')
      for (let i = 0; i < fileList.length; i++) {
        formData = new FormData()
        formData.append('imgUrl', fileList[i])
        this.httpHelper({
          url: 'http://www.mayishengcai.com/VoteManager/rest/appUploadPics',
          type: 'post',
          async: true,
          data: formData,
          success: function (data) {
            that.ajaxSuccess(data)
          },
          error: function (err) {
            that.ajaxError(err)
          }
        })
      }
      fileInput.value = null
      return true
    },
    ajaxSuccess: function (data) {
      let jsdata = JSON.parse(data)
      this.imgsrc.push(jsdata[0])
      this.imagesLen--
      if (this.imagesLen === 0) {
        $.hidePreloader()
        setTimeout(function () {
          $.alert('上传成功')
        }, 300)
      }
      this.$emit('imgloaded', this.imgsrc)
    },
    ajaxError: function (err) {
      $.hidePreloader()
      setTimeout(function () {
        $.alert(err)
      }, 300)
      return false
    },
    httpHelper: function (params) {
      let request
      if (XMLHttpRequest) {
        request = new XMLHttpRequest()
      }
      else {
        params.error('浏览器不支持Ajax')
      }
      request.onreadystatechange = function () {
        if (request.readyState === 4) {
          if (request.status === 200) {
            if (params.success) {
              params.success(request.responseText)
            }
          }
          else if (parseInt(request.status / 100, 0) === 4) {
            if (params.error) {
              params.error(request.responseText)
            }
          }
        }
      }
      request.open(params.type, params.url, params.async)
      try {
        request.send(params.data || null)
      }
      catch (e) {
        if (params.error) {
          params.error(request.responseText)
        }
      }
    }
  },
  watch: {
    imgsrc: {
      handler: function (val) {
        setTimeout(function () {
          $('.upload-icon').css('height', $('.upload-icon').css('width'))
        }, 300)
      },
      deep: true
    }
  }
}
</script>

<style scoped>
.upload-icon{
  padding:2px;
  height:100%;
  overflow:hidden;
}
.upload-icon img{
  width:100%;
  height:100%;
  background-color:#FFF;
}
.file{
  width:100%;
  height:100%;
  background-size:100% 100%;
}
.file input {
  position:relative;
    width:100%;
    font-size:55px;
    right:0;
    top:0;
    opacity:0;
}
.file.add-upload{
  background-image:url(../assets/images/public/add_upload.png);
}
.file.add-uploads{
  background-image:url(../assets/images/public/add_uploads.png);
}
.file.add-plus{
  background-image:url(../assets/images/public/add.png);
}
</style>